<template>
  <div class="box">
    <!-- 登录组件的制作 -->
    <div class="view">
      <div class="loginimg">
        <img src="../../assets/logo.png" alt="">
      </div>
      <!-- 登录信息的表单制作
      1. 首先因为在登陆之后，浏览器会将整个form表单的数据提交给服务器，
      所以给表单绑定一个包含用户名和密码的数据对象
      2.因为在还要对用户的信息做一个验证，所以要添加一个表单验证，
      来控制用户输入的信息符合我们所规定的 -->
      <el-form class="form" :model="form" :rules="rules" ref="loginform" label-width="0px" >
        <!-- 用prop来验证输入框的内容是否符合
        用户输入框 -->
        <el-form-item prop="username">
          <el-input 
          prefix-icon="el-icon-user" 
          v-model="form.username" 
         ></el-input>
        </el-form-item>
         <!-- 密码输入框的制作 -->
        <el-form-item prop="password">
          <el-input 
          prefix-icon="el-icon-lock" 
          v-model="form.password" 
          type="password" 
          ></el-input>
        </el-form-item>
        <!-- 登录重置按钮的制作 -->
        <el-form-item class="button">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="reset">重置</el-button>
         </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
// 引入封装axios的请求
import {netrequest} from '../../network/request'

export default {
  name: 'login',
  data(){
    return{
      // 表单数据
      form:{
        username:'',
        password:''
        },
        // 验证规则的数据
      rules:{
        username:[
          { required: true, message: '请输入正确的用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        password:[
          { required: true, message: '请输入您的密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods :{
    // 对表单项进行重置操作
    reset(){
      this.$refs.loginform.resetFields()
    },
    login(){
      
      // 对表单进行预验证
      // 因为表单预验证方法传入的是一个函数，传入的形参是表单验证的Boolean值
      this.$refs.loginform.validate(async valid =>{
        // console.log(valid);
      // 然后根据表单预验证的值判断是否可以向服务器发送请求来判断该用户是否存在
      // 验证失败则直接返回
        if(!valid) return
      // 如果验证成功的话则让则让浏览器向服务器发送请求来判断表单中的数据是否存在
      // 因为axios是异步操作并且返回的是promise对象，为了直接得到服务器返回的数据，
      // 所以用async和await更加方便
      // 然后利用解构赋值把需要的数据取出来
       const {data:res} = await netrequest({
        method:'post',
        url:'/login',
        data:this.form
      })
      console.log(res);
      // 之后则是根据请求的状态码来判断请求是否成功，并且利用element框架的消息弹框来弹出正误的弹框
      if(res.meta.status !== 200)   return this.$message.error(res.meta.msg)

      this.$message.success(res.meta.msg)
      // 成功之后，服务器会产生一个token来表明用户的身份，并且要把这个token保存在浏览器中，然后在之后的发送的
      // 每一次请求都要携带token，这样服务器可以知道哪个用户进行了哪些操作
      window.sessionStorage.setItem('token',res.data.token)
        // 然后因为点击登录按钮之后就要进入主页面，所以要控制路由的跳转
        this.$router.push('/home')
      
      })
    
    }
  }
}
</script>

<style>

.box{
  width: 100%;
  height: 100%;
  background: #2b4b6b;
}
.view{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 300px;
  width: 500px;
  background: white;
}
.loginimg{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 150px;
  height: 150px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px 0 #ddd;
  background: white;
  border-radius: 50%;
  padding: 10px;
}
.loginimg img{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #eee;
}
.form{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
}
.button{
  padding: 0 0 0 150px ;
}

</style>

